<template>
  <el-table :data="tableData" style="width: 100%" class="mx-20">
    <el-table-column type="expand">
      <template #default="scop">
        <el-form
            label-position="right"
            label-width="auto"
        >
          <el-form-item label="配置名称" label-position="right">
            <el-input v-model="scop.row.confName"/>
          </el-form-item>

          <el-form-item label="原分享链接" label-position="right">
            <el-input v-model="scop.row.shareUrl">
              <template #append>
                <el-button type="primary" @click="showList(scop.row)">
                  查看
                </el-button>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="保存路径" label-position="right">
            <el-input v-model="scop.row.savePath"/>
          </el-form-item>

          <el-form-item label="匹配规则" label-position="right">
            <el-input v-model="scop.row.matchRule"/>
          </el-form-item>

          <el-form-item label="保存开始的文件名" label-position="right">
            <el-input v-model="scop.row.saveStartFileName"/>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="saveData(scop.row)">
              保存
            </el-button>
          </el-form-item>

        </el-form>

      </template>
    </el-table-column>

    <!--    <el-table-column prop="id" label="ID" />-->
    <el-table-column prop="confName" label="配置名称"/>
    <!--    <el-table-column prop="shareUrl" label="原分享链接"/>-->
    <!--    <el-table-column prop="savePath" label="保存路径"/>-->
    <!--    <el-table-column prop="saveStartFileName" label="保存开始的文件名"/>-->
    <!--    <el-table-column prop="matchRule" label="匹配规则"/>-->
    <!--    <el-table-column prop="renameRule" label="重命名规则"/>-->
    <!--    <el-table-column prop="runTime" label="运行时间"/>-->
    <!--    <el-table-column prop="cycleSave" label="是否循环转存中"/>-->
    <!--&lt;!&ndash;    <el-table-column prop="quarkUserId" label="夸克用户ID"/>&ndash;&gt;-->
    <!--&lt;!&ndash;    <el-table-column prop="quarkUserName" label="夸克用户名称"/>&ndash;&gt;-->
    <!--    <el-table-column prop="createTime" label="创建时间"/>-->
    <!--    <el-table-column prop="updateTime" label="更新时间"/>-->
    <!--    <el-table-column prop="state" label="数据状态"/>-->
    <!--    <el-table-column fixed="right" label="Operations" min-width="120">-->
    <!--      <template #default="scop">-->
    <!--        <el-button link type="primary" size="small" @click="handleClick(scop.row)">-->
    <!--          Detail-->
    <!--        </el-button>-->
    <!--        <el-button link type="primary" size="small">Edit</el-button>-->
    <!--      </template>-->
    <!--    </el-table-column>-->


  </el-table>


  <el-dialog v-model="dialogTableVisible" title="详情" width="800">
    <el-table :data="dtlData">
      <el-table-column property="file_name" label="文件名" >
      </el-table-column>
      <el-table-column  label="修改日期">
        <template #default="scop">
          {{ts2date(scop.row.updated_at)}}
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>


</template>

<script setup>
import {quarkListApi, getDtlApi} from '@/plugins/http/api/quark'
import {ref} from "vue";


let tableData = [];
let dtlData = [];

const ts2date = (value) => {
  const date = new Date(value);
  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
}
const size = (value) => {
  if (!value) return "";
  const unitArr = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
  const srcsize = parseFloat(value);
  const index = srcsize ? Math.floor(Math.log(srcsize) / Math.log(1024)) : 0;
  const size = (srcsize / Math.pow(1024, index)).toFixed(1).replace(/\.?0+$/, "");
  return size + unitArr[index];
}

const handleClick = (row) => {
  console.log(row)
}

const saveData = (row) => {
  console.log(row)
}

const dialogTableVisible = ref(false)

const showList = (row) => {
  dialogTableVisible.value = true

  let req = {
    quarkUserId: row.quarkUserId,
    shareUrl: row.shareUrl,
    matchRule: row.matchRule,
  }

  getDtlApi(req).then(res => {
    dtlData = res.data;
  })
}


quarkListApi().then(res => {
  tableData = res.data;
  console.log(res)
})
</script>
